<template>
  <div
    ref="container"
    class="home-container"
    @wheel="handlerWheel"
    v-loading="isLoading"
  >
    <ul
      class="carousel-container"
      :style="{ marginTop }"
      @transitionend="handlerTransitionEnd"
    >
      <li
        v-for="carousel in data"
        :key="carousel.id"
      >
        <CarouselItem :carousel="carousel" />
      </li>
    </ul>
    <div
      class="arrow arrow-up"
      @click="switchTo(index - 1)"
      v-show="index > 0"
    >
      <Icon
        type="arrowUp"
        class="inconfont"
      />
    </div>
    <div
      class="arrow arrow-down"
      @click="switchTo(index + 1)"
      v-show="index < data.length - 1"
    >
      <Icon
        type="arrowDown"
        class="inconfont"
      />
    </div>
    <ul class="indicator">
      <li
        v-for="(item, i) in data"
        :key="item.id"
        class="point"
        @click="switchTo(i)"
        :class="{active: i === index}"
      ></li>
    </ul>
  </div>
</template>

<script>
import CarouselItem from "./CarouselItem.vue";
import Icon from "@/components/Icon";
import { getBanners } from "@/api/banner";
import fetchData from "@/mixins/fetchData.js";
export default {
  components: {
    CarouselItem,
    Icon,
  },
  // 组件混入：封装好的 从远程获取数据
  mixins: [fetchData([])],
  data() {
    return {
      index: 0, // 当前显示的banner的索引值
      containerHeight: 0, // 当前 容器的高度
      wheeling: false, // 是否正在切换滚动
    };
  },
  mounted() {
    this.containerHeight = this.$refs.container.clientHeight;
    window.addEventListener("resize", this.handlerResize);
  },
  destroyed() {
    window.removeEventListener("resize", this.handlerResize);
  },
  computed: {
    marginTop() {
      return -this.index * this.containerHeight + "px";
    },
  },
  methods: {
    // 切换当前显示的轮播图
    switchTo(i) {
      this.index = i;
    },
    // 窗口大小改变时，需要重新获取容器大小
    handlerResize() {
      this.containerWidth = this.$refs.container.clientWidth;
      this.containerHeight = this.$refs.container.clientHeight;
    },
    // 鼠标滚轮 翻页
    handlerWheel(e) {
      if (this.wheeling) return;
      // 往上
      if (e.deltaY < -5 && this.index > 0) {
        this.wheeling = true;
        this.index--;
      } else if (e.deltaY > 5 && this.index < this.data.length - 1) {
        // 往下
        this.wheeling = true;
        this.index++;
      }
    },
    // 过渡完成：翻页动作完成
    handlerTransitionEnd() {
      this.wheeling = false;
    },
    // 获取远程数据
    async fetchData() {
      return await getBanners();
    },
  },
};
</script>

<style scoped lang="less">
@import "~@/style/minix.less";
@import "~@/style/var.less";
.home-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #fff;

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .carousel-container {
    width: 100%;
    height: 100%;
    transition: 0.5s;
    li {
      width: 100%;
      height: 100%;
    }
  }

  @jump: 5px;
  @gap: 25px;
  .inconfont {
    font-size: 35px;
  }
  .arrow {
    .self-center();
    transform: translateX(-50%);
    transition: 0.5s;
    cursor: pointer;
  }
  .arrow-up {
    top: @gap;
    animation: arrow-up-jump 2s infinite;
  }
  .arrow-down {
    top: auto;
    bottom: @gap;
    animation: arrow-down-jump 2s infinite;
  }
  @keyframes arrow-down-jump {
    0% {
      transform: translate(-50%, @jump);
    }
    50% {
      transform: translate(-50%, -@jump);
    }
    100% {
      transform: translate(-50%, @jump);
    }
  }
  @keyframes arrow-up-jump {
    0% {
      transform: translate(-50%, -@jump);
    }
    50% {
      transform: translate(-50%, @jump);
    }
    100% {
      transform: translate(-50%, -@jump);
    }
  }

  .indicator {
    .self-center();
    left: auto;
    right: 20px;
    transform: translateY(-50%);

    .point {
      width: 7px;
      height: 7px;
      background: #000;
      border: 1px solid #fff;
      border-radius: 50%;
      margin-bottom: 10px;
      box-sizing: border-box;
      cursor: pointer;
      &.active {
        background: #fff;
      }
    }
  }
}
</style>